<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/13 22:14:01
  @file: NavLink.vue
  @description: 
  ```
  路由
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <span :class="['link', { active: isActive }]" @click="navigate">
    {{ route.name }}
  </span>
</template>

<script>
import { RouterLink, useLink } from "vue-router";
export default {
  name: "NavLink",
  props: {
    ...RouterLink.props,
    inactiveClass: String,
  },
  setup(props) {
    // 获取 RouterLink 内部属性和方法
    const { route, href, isActive, isExactActive, navigate } = useLink(props);
    // let style =
    //   "color: #fff; background: #3fb983; font-size: 14px;border-radius: 5px; padding: 0 2px;";

    // console.log("%c%s", style, "route", route);
    // console.log("%c%s", style, "href", href);
    // console.log("%c%s", style, "isActive", isActive);
    // console.log("%c%s", style, "isExactActive", isExactActive);
    // console.log("%c%s", style, "navigate", navigate);

    return { route, href, isActive, isExactActive, navigate };
  },
};
</script>

<style scoped>
.link {
  font-weight: bold;
  color: #2c3e50;
  margin: 0 1px;
  padding: 0 3px;
  border-radius: 5px;
  background-color: #f1f1f1;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
}
.active {
  background-color: #3fb983;
  color: #fff;
}
</style>
